<template>
  <div class="antd-table-container">
    <!-- 操作栏 -->
    <div class="table-operations mb-4">
      <span>用户ID</span>
      <a-input
        placeholder="请输入用户ID"
        v-model="patientId"
        style="width: 150px;margin-left: 10px;">
      </a-input>

      <span style="margin-left: 20px;">性别</span>
     
      <a-select
        v-model:value="sex"
        :size="size"
        style="width: 80px;margin-left: 10px;"
        :options="sexOptions"
      ></a-select>

      <span style="margin-left: 20px;">年龄</span>
      <a-input
        v-model="minAge"
        style="width: 50px;margin-left: 10px;">
      </a-input>
      <span style="margin-left: 10px;margin-right: 10px;">至</span>
      <a-input
        v-model="maxAge"
        style="width: 50px;">
      </a-input>

      <span style="margin-left: 10px;margin-right: 10px;">入院科室</span>
      <a-select
        v-model:value="ryks"
        :size="size"
        style="width: 150px;margin-left: 10px;"
        :options="ryksOptions"
      ></a-select>

      <a-button @click="handleSearch" style="margin-left: 10px;">
        <a-icon type="search"/>
        查询
      </a-button>

      <a-button @click="handleRefresh" style="margin-left: 10px;">
        <a-icon type="sync"/>
        重置
      </a-button>
    </div>

    <!-- Ant Design 表格 -->
    <a-table
      :columns="columns"
      :data-source="tableData"
      :row-key="record => record.id"
      :pagination="false"
      :loading="loading"
      :scroll="{ y: tableHeight }"
      bordered
      class="bordered-table"
    >

      <!-- 操作列自定义渲染 -->
    <template #operation="text, record">
        <a @click="handleView(record)">查看</a>
        <a-divider type="vertical"/>
        <a @click="handleExport(record)">导出</a>
      </template>
    </a-table>

    <div class="space-between" slot="footer">
      <div class="pagination-total">
        共 <span class="total-num">{{ this.pagination.total }}</span> 条
      </div>
      <a-pagination
        v-model:current="this.pagination.current"
        :total="this.pagination.total"
        :pageSize="this.pagination.pageSize"
        @change="paginationChange"
      />
    </div>
  </div>
</template>

<script>
import {
  Table, Button, Icon, Input, Tag, Divider,
  Dropdown, Menu, message, Pagination, Radio, Select
} from 'ant-design-vue';

import {
  zzqsList
} from "../api/jzsj";

export default {
  name: 'DataTablePage',
  components: {
    'a-table': Table,
    'a-button': Button,
    'a-icon': Icon,
    'a-input': Input,
    'a-tag': Tag,
    'a-divider': Divider,
    'a-dropdown': Dropdown,
    'a-menu': Menu,
    'a-menu-item': Menu.Item,
    "a-pagination": Pagination,
    "a-radio-group": Radio.Group,
    "a-radio-button": Radio.Button,
    "a-radio": Radio,
    "a-select": Select,
    "a-option": Select.Option
  },
  data() {
    return {
      // 表格加载状态
      loading: false,
      tableHeight: 500,
      // 搜索文本
      patientId: '',
      sex: '',
      minAge: null,
      maxAge: null,
      ryks: '',
      // 原始数据
      tableData: [],
      sexOptions: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '男',
          value: '男',
        },
        {
          label: '女',
          value: '女',
        },
      ],

      ryksOptions: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '急诊医学科',
          value: '急诊医学科',
        },
        {
          label: '呼吸科',
          value: '呼吸科',
        },
      ],

      // // 分页配置
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },

      // 列定义
      columns: [
        {
          title: '患者Id',
          dataIndex: 'id',
          key: 'id',
          align: 'center'
        },
        {
          title: '性别',
          dataIndex: 'gender',
          key: 'gender',
          align: "center"
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
          align: "center"
        },
        {
          title: '出院方式',
          dataIndex: 'cyfs',
          key: 'cyfs',
          align: "center"
        },
        {
          title: '入院科室',
          dataIndex: 'ryks',
          key: 'ryks',
          align: "center"
        },
        {
          title: '呼吸机使用时间',
          dataIndex: 'hxjsysj',
          key: 'hxjsysj',
          align: "center"
        },
        {
          title: '操作',
          key: 'operation',
          scopedSlots: {customRender: 'operation'},
          minWidth: 20,
          maxWidth: 30,
          align: "center"
        }
      ]
    };
  },

  computed: {},

  created() {
    this.paginationChange(1, 10);
    this.loading = false;
  },

  methods: {
    async paginationChange(page, pageSize) {
      // 显示加载状态
      this.loading = true;
      this.pagination.current = page;
      this.pagination.pageSize = pageSize;
      let params = {
        pageNum: page,
        pageSize: pageSize,
        patientId: this.patientId,
        sex: this.sex,
        minAge: this.minAge,
        maxAge: this.maxAge,
        ryks: this.ryks
      };
      let res = await zzqsList(params);
      if (res.status === 0) {
        this.tableData = res.data;
        this.pagination.total = res.total;
      }
      this.loading = false;
    },

    onShowSizeChange(pageSize) {
      this.pagination.current = 1;
      this.pagination.pageSize = pageSize;
      this.paginationChange(1, pageSize);
    },

    // 搜索处理
    handleSearch() {
      // 搜索时重置到第一页
      this.pagination.current = 1;
      this.paginationChange(1, this.pagination.pageSize);
    },

    // 刷新数据
    handleRefresh() {
      this.patientId = '';
      this.sex = '';
      this.minAge = '';
      this.maxAge = '';
      this.cyfs = '';
      this.ryks = '';
      this.hxjsysj = '';
      this.pagination.current = 1;

      this.paginationChange(1, this.pagination.pageSize);
      message.success('数据已刷新');
    },


    // 查看
    handleView(record) {
      console.info(record.id);

      // 实际应用中打开详情页
      this.$router.push({
        path: '/detail',
        query: {id: record.id}
      });
    },

    // 导出
    handleExport(record) {
      message.info(`编辑用户: ${record.username}`);
      // 实际应用中打开编辑表单
    },
    handleChange(info) {
      let that = this;
      const status = info.file.status;
      if (status !== 'uploading') {
        this.loading = true;
      }
      if (status === 'done') {
        this.message(`上传成功`);
      } else if (status === 'error') {
        this.$message.error(`${info.file.name} 上传失败！`);
      }
    }
  }
};
</script>

<style scoped>
.antd-table-container {
  padding: 20px;
  background-color: #fff;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 500;
}

.page-header p {
  margin: 0;
  color: #666;
}

.table-operations {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

/* 表格边框样式增强 */
.bordered-table {
  border: 1px solid #e8e8e8;
}

/* 表头样式增强 */
.bordered-table thead th {
  background-color: #fafafa;
  border-right: 1px solid #e8e8e8;
  font-weight: 500;
}

/* 表格单元格样式增强 */
.bordered-table td {
  border-right: 1px solid #e8e8e8;
}

/* 解决最后一列边框问题 */
.bordered-table th:last-child,
.bordered-table td:last-child {
  border-right: none;
}

/* 行边框样式 */
.bordered-table tbody tr {
  border-bottom: 1px solid #e8e8e8;
}

.bordered-table tbody tr:last-child {
  border-bottom: none;
}
</style>
